<template>
  <div class="mainBox">
    <pageTitle Title="考号管理"></pageTitle>
    <div class="searchBar">
      <el-select
        v-model="searchParam.batchCode"
        clearable
        class="mySelect1 m-2"
        placeholder="请选择考试批次"
      >
        <el-option
          v-for="item in store.batchList"
          :key="item.code"
          :label="item.name"
          :value="item.code"
        />
      </el-select>
      <el-input
        class="myInput"
        v-model="searchParam.examNo"
        placeholder="请输入考号"
        clearable
      />
      <el-button @click="handleSearch">搜索</el-button>
    </div>

    <div class="tableBar">
      <MyTable :tableData="tableData">
        <el-table-column prop="createTime" align="center" label="时间" />
        <el-table-column prop="openid" align="center" label="openID" />
        <el-table-column prop="stuName" align="center" label="姓名" />
        <el-table-column fixed="right" align="center" label="操作" width="200">
          <template #default>
            <el-button link type="primary" size="small">待定</el-button>
          </template>
        </el-table-column>
      </MyTable>
      <Pagination
        :total="tableData.length"
        v-if="tableData.length > 10"
      ></Pagination>
    </div>
  </div>
</template>

<script setup>
import useBatchStore from '@/store/batchStore';
import { ElMessage } from 'element-plus';
import { getStubind } from '@/Api/pc';
const store = useBatchStore();
const searchParam = reactive({
  batchCode: '',
  examNo: '',
});

const tableData = ref([]);

const handleSearch = () => {
  if (searchParam.batchCode == '') {
    ElMessage({
      message: '考试批次不能为空',
      type: 'warning',
      offset: 10,
    });
  } else if (searchParam.examNo == '') {
    ElMessage({
      message: '考号不能为空',
      type: 'warning',
      offset: 10,
    });
  } else {
    getStubind({ ...searchParam }).then((res) => {
      tableData.value = res.obj;
    });
  }
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/mycss.css';
</style>
